<template>
  <el-dialog
      v-model="visible"
      title="歌曲评论"
      width="600px"
      :before-close="handleClose"
  >
    <!-- 当前歌曲信息 -->
    <div class="song-header">
      <el-avatar :src="currentSong.cover" size="60" />
      <div class="song-detail">
        <div class="song-name">{{ currentSong.name }}</div>
        <div class="song-artist">歌手：{{ currentSong.artist }}</div>
      </div>
    </div>


    <!-- 写评论（未登录禁用） -->
    <div class="comment-input">
      <el-input
          v-model="newComment"
          placeholder="写下你的评论..."
          type="textarea"
          :rows="3"
          :disabled="!isLogin()"
          @keyup.enter.native="submitComment"
      />
      <div class="comment-btn">
        <el-button
            type="primary"
            @click="submitComment"
            :disabled="!isLogin() || !newComment.trim()"
        >
          提交评论
        </el-button>
        <el-button v-if="!isLogin()" @click="showLogin">登录后评论</el-button>
      </div>
    </div>

    <!-- 评论列表 -->
    <div class="comment-list">
      <div class="comment-item" v-for="(item, idx) in comments" :key="idx">
        <el-avatar :src="item.avatar" size="40" />
        <div class="comment-content">
          <div class="comment-user">
            <span class="username">{{ item.username }}</span>
            <span class="time">{{ item.time }}</span>
          </div>
          <div class="comment-text">{{ item.content }}</div>
          <div class="comment-action">
            <el-button size="small" icon="ThumbsUp" @click="likeComment(item)">
              {{ item.likeCount }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { isLogin } from '../utils/auth'
import { formatDate } from '../utils/format'

const visible = ref(false)
const currentSong = ref({}) // 当前播放歌曲
const newComment = ref('')
const comments = ref([
  // 模拟评论数据
  {
    username: '用户1',
    avatar: 'https://picsum.photos/40/40?random=10',
    time: formatDate(new Date() - 3600000), // 1小时前
    content: '太好听了！循环一整天～',
    likeCount: 12
  },
  {
    username: '用户2',
    avatar: 'https://picsum.photos/40/40?random=11',
    time: formatDate(new Date() - 86400000), // 1天前
    content: 'Ariana的嗓音绝了！',
    likeCount: 8
  }
])

// 监听“显示评论模态框”事件
onMounted(() => {
  window.addEventListener('showCommentModal', (e) => {
    currentSong.value = e.detail.song
    visible.value = true
  })
})

// 提交评论（实际项目中调用接口）
const submitComment = () => {
  if (!newComment.value.trim()) return
  comments.value.unshift({
    username: 'TestMusic', // 实际从登录信息获取
    avatar: 'https://picsum.photos/40/40?random=99',
    time: '刚刚',
    content: newComment.value,
    likeCount: 0
  })
  newComment.value = ''
}

// 点赞评论
const likeComment = (item) => item.likeCount++

// 显示登录模态框
const showLogin = () => window.dispatchEvent(new CustomEvent('showLoginModal'))

// 关闭模态框
const handleClose = () => {
  visible.value = false
  newComment.value = ''
}
</script>

<style scoped>
.song-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.song-detail { margin-left: 15px; line-height: 1.5; }
.song-name { font-size: 16px; font-weight: bold; }
.song-artist { font-size: 14px; color: #666; }
.comment-input { margin-bottom: 20px; }
.comment-btn {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}
.comment-list { max-height: 400px; overflow-y: auto; }
.comment-item {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.comment-content { flex: 1; }
.comment-user {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 12px;
}
.username { font-weight: bold; }
.time { color: #999; }
.comment-text { margin-bottom: 5px; }
.comment-action { font-size: 12px; color: #666; }
</style>